import ProDescriptions from '@ant-design/pro-descriptions';
import {
  ProFormDependency,
  ProFormDigit,
  ProFormGroup,
  ProFormInstance,
  ProFormList,
  ProFormSelect,
  ProFormText,
  StepsForm,
} from '@ant-design/pro-form';
import ProTable from '@ant-design/pro-table';
import { ConfigProvider, Button, Space, Divider, Tabs } from 'antd';
import { useRef, useState } from 'react';
import en_US from 'antd/lib/locale/en_US';
import zh_CN from 'antd/lib/locale/zh_CN';

import './index.less';

const page = [
  { label: '是', value: true },
  { label: '否', value: false },
];
const operate = { add: '新增', import: '导入', export: '导出' };

const options = [
  { value: `date`, label: `日期`, initialValue: Date.now() },
  { value: `dateTime`, label: `日期时间`, initialValue: Date.now() },
  { value: `dateWeek`, label: `周`, initialValue: Date.now() },
  { value: `dateMonth`, label: `月`, initialValue: Date.now() },
  { value: `dateQuarter`, label: `季度输入`, initialValue: Date.now() },
  { value: `dateYear`, label: `年份输入`, initialValue: Date.now() },
  {
    value: `dateRange`,
    label: `日期区间`,
    initialValue: [Date.now(), Date.now()],
  },
  {
    value: `dateTimeRange`,
    label: `日期时间区间`,
    initialValue: [Date.now(), Date.now()],
  },
  { value: `time`, label: `时间`, initialValue: Date.now() },
  {
    value: `timeRange`,
    label: `时间区间`,
    initialValue: [Date.now(), Date.now()],
  },
  { value: `text`, label: `文本框`, initialValue: '123456' },
  { value: `select`, label: `下拉框`, initialValue: 'open' },
  { value: `digit`, label: `数字输入框`, initialValue: '200000' },
];

export default function IndexPage() {
  const [data, setData] = useState<any>();
  const formMapRef = useRef<
    React.MutableRefObject<ProFormInstance<any> | undefined>[]
  >([]);

  const onFormFinish = (value: any) => {
    console.log(value);

    setData(value);
  };

  return (
    <div className="wrapper_content">
      <ConfigProvider>
        <StepsForm onFinish={onFormFinish} formMapRef={formMapRef}>
          <StepsForm.StepForm
            title="设置表格基本信息"
            initialValues={{
              headerTitle: '',
              pagination: false,
              is_page: false,
              manualRequest: false,
              action: ['add', 'import', 'export'],
              cardProps: {
                title: '我是标题',
              },
              local: 'en_US',
            }}
          >
            <ProFormText label="标题" name={['cardProps', 'title']} />
            <ProFormSelect
              label="是否翻页"
              name="is_page"
              options={page as []}
            />

            <ProFormDependency name={['is_page']}>
              {({ is_page }) => {
                if (!is_page) return null;
                return (
                  <ProFormGroup>
                    <ProFormDigit
                      label="每页条数"
                      // name="defaultPageSize"
                      name={['pagination', 'defaultPageSize']}
                      min={1}
                      fieldProps={{ precision: 0, step: 5, defaultValue: 10 }}
                      width={120}
                    />
                    <ProFormSelect
                      label="支持快速跳转"
                      // name="showQuickJumper"
                      name={['pagination', 'showQuickJumper']}
                      options={page as []}
                    />
                    <ProFormSelect
                      label="尺寸"
                      // name="size"
                      name={['pagination', 'size']}
                      valueEnum={{ small: 'small', default: 'default' }}
                    />
                  </ProFormGroup>
                );
              }}
            </ProFormDependency>

            <ProFormSelect
              label="是否手动触发首次请求"
              name="manualRequest"
              options={page as []}
            />
            <ProFormSelect
              label="操作项"
              name="action"
              valueEnum={operate}
              fieldProps={{ mode: 'multiple' }}
            />
            <ProFormSelect
              label="国际化配置"
              name="local"
              valueEnum={{ en_US: '英文', zh_CN: '中文' }}
            />
          </StepsForm.StepForm>
          <StepsForm.StepForm
            title="设置表格列信息"
            style={{ width: 800 }}
            // stepProps={{
            //   description: '这里填入运维参数',
            // }}
          >
            <ProFormList
              min={1}
              max={50}
              name="columns"
              initialValue={[
                {
                  hideInSearch: false,
                  valueType: 'text',
                  fixed: '0',
                },
              ]}
              creatorButtonProps={{
                position: 'bottom',
                creatorButtonText: '再加一列',
              }}
              creatorRecord={{
                hideInSearch: false,
                valueType: 'text',
                fixed: '0',
              }}
            >
              <ProFormGroup>
                <ProFormText
                  name="title"
                  label="标题"
                  formItemProps={{ rules: [{ max: 10 }, { required: true }] }}
                  width={150}
                />
                <ProFormText
                  name="dataIndex"
                  tooltip="数据字段名 不可重复"
                  label="key"
                  formItemProps={{ rules: [{ max: 20 }, { required: true }] }}
                  width={150}
                />
                <ProFormSelect
                  options={options}
                  label="类型"
                  name="valueType"
                  formItemProps={{ rules: [{ required: true }] }}
                />
                <ProFormSelect
                  options={page as []}
                  label="隐藏搜索"
                  name="hideInSearch"
                  formItemProps={{ rules: [{ required: true }] }}
                />
                <ProFormSelect
                  valueEnum={{
                    0: '不固定',
                    right: '固定在右',
                    left: '固定在左',
                  }}
                  label="是否固定"
                  name="fixed"
                  // formItemProps={{ rules: [{ required: true }] }}
                />
              </ProFormGroup>
            </ProFormList>
          </StepsForm.StepForm>
        </StepsForm>
        <Divider style={{ width: '100%' }}>
          提交数据后可预览{' '}
          <Button
            type="link"
            target="_blank"
            href="https://n9723sxlp0.feishu.cn/docs/doccn4DblqTYC1DZaN9mTRShwqh#"
          >
            项目介绍及后续计划
          </Button>{' '}
        </Divider>
        <Tabs defaultActiveKey="1" centered>
          <Tabs.TabPane tab="表格预览" key="1">
            <ConfigProvider locale={data?.local === 'zh_CN' ? zh_CN : en_US}>
              {data && (
                <ProTable
                  {...data}
                  headerTitle={[
                    <Space key="space">
                      {data.action.includes('add') && (
                        <Button
                          key="add"
                          type="primary"
                          onClick={() => {
                            alert('add');
                          }}
                        >
                          Add
                        </Button>
                      )}
                      {data.action.includes('import') && (
                        <Button
                          key="import"
                          type="primary"
                          onClick={() => {
                            alert('import');
                          }}
                        >
                          Import
                        </Button>
                      )}
                      {data.action.includes('export') && (
                        <Button
                          key="export"
                          type="primary"
                          onClick={() => {
                            alert('export');
                          }}
                        >
                          Export
                        </Button>
                      )}
                    </Space>,
                  ]}
                  scroll={{ x: 1200 }}
                />
              )}
            </ConfigProvider>
          </Tabs.TabPane>
          <Tabs.TabPane tab="JSON 代码块" key="2">
            <ProDescriptions>
              <ProDescriptions.Item label="JSON 代码块" valueType="jsonCode">
                {JSON.stringify(data)}
              </ProDescriptions.Item>
            </ProDescriptions>
          </Tabs.TabPane>
        </Tabs>
      </ConfigProvider>
    </div>
  );
}
